<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常见样式属性</title>
    <link rel="stylesheet" href="./css_six.css">
    <link rel="stylesheet" href="../CSS/font-awesome.css">
</head>

<body class="bg-demo6">
    <p class="value_px">绝对单位</p>
    <p class="value_em">相对单位</p>
    <p class="value_rem">相对单位</p>
    <p class="color_name">颜色值：名称</p>
    <p class="color_hex">颜色值：进制</p>
    <p class="color_rgb">颜色值：rgb</p>
    <p class="img_url">图片函数</p>
    <p class="font_demo">字体样式，属性展示风格</p>
    <p class="text_demo">文本样式展示</p>
    <ul class="list-demo">
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
    </ul>
    <div class="bg-box bg-demo1">
        背景样式：颜色
    </div>
    <div class=" bg-box bg-demo2">
        背景样式：图片(重复渐进)
    </div>
    <div class=" bg-box bg-demo3">
        背景样式：图片(是否重复)
    </div>
    <div class=" bg-box bg-demo4">
        背景样式：图片位置
    </div>
    <table class="table-demo">
        <caption>学生信息表</caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>总分</th>
                <th>排名</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>2</td>
                <td>张四</td>
                <td>4</td>
                <td>3</td>
            </tr>
            <tr>
                <td>3</td>
                <td>张五</td>
                <td>5</td>
                <td>2</td>
            </tr>
            <tr>
                <td>4</td>
                <td>张六</td>
                <td>6</td>
                <td>1</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">总人数：4人</td>
            </tr>
        </tfoot>
    </table>
    <div class="form-demo">

        <form action="">
            <!-- <fieldset> -->
                <legend>登录信息</legend>
                <p>
                    <!-- <label for="username"> -->
                        <i class="fa fa-user-circle"></i>
                    <!-- </label> -->
                    <input type="text" name="username" id="username">
                </p>
                <p>
                    <!-- <label for="password"> -->
                        <i class="fa fa-unlock"></i>
                    <!-- </label> -->
                    <input type="password" name="password" id="password">
                </p>
            <!-- </fieldset> -->
            <input type="submit" value="登 录">
        </form>
    </div>
</body>

</html>